<template>
	<div class="left">
		<div class="global-visualization-box-head title">
			<span class="text">碳交易实时数据</span>
			<div class="footer-pan"></div>
		</div>
		<div class="chart">
			<div id="bottomtp-left"></div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import request from '@/common/request.js';
	const domId = 'bottomtp-left';

	export default {
		data() {
			return {
				option: {},
				xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				y1Data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			}
		},
		methods: {
			loadData() {
				let that = this
				request.get('/jeecgboot/statistic/carbon/getCarbonTradeList?startTime=2023-06-01').then(res => {
					console.log(res, '----res----')
					that.option = {
						color: [
							'#3D81F3',
							'#7BFFC0',
							'#76DBFB',
							'#FFEE73',
							'#36CCB5',
							'#5A3BEF',
							'#A56CFA',
							'#FFAF66'
						],
						title: {
							text: '单位：万吨',
							textStyle: {
								color: '#fff',
								fontSize: 11,
							},
							top: '5px',
							left: '7px'
						},
						legend: {
							icon: 'circle',
							itemWidth: 6,
							itemHeight: 6,
							itemGap: 6,
							data: Object.keys(res.result.data),
							top: '6',
							right: '2',
							textStyle: {
								fontSize: 11,
								color: '#fff',
							},
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								lineStyle: {
									color: '#57617B'
								},
							},
						},
						xAxis: [{
							type: 'category',
							boundaryGap: false,
							axisLine: {
								show: false,
								lineStyle: {
									color: '#fff'
								},
							},
							axisTick: {
								show: false
							},
							data: [0, 0, 0, 0, 0],
						}, ],
						yAxis: [{
							type: 'value',
							name: '',
							axisTick: {
								show: false
							},
							axisLine: {
								textStyle: {
									color: '#fff'
								},
								lineStyle: {
									color: 'rgba(255,255,255,.3)'
								},
							},
							axisLabel: {
								margin: 10,
								textStyle: {
									fontSize: 14,
									color: '#fff',
								},
							},
							splitLine: {
								lineStyle: {
									color: '#57617B'
								},
							},
						}, ],
						series: [{
								name: '上月碳排放',
								type: 'line',
								smooth: true,
								symbol: 'circle',
								symbolSize: 5,
								showSymbol: false,
								lineStyle: {
									normal: {
										width: 1
									},
								},
								itemStyle: {
									normal: {
										color: 'rgb(51, 163, 225)',
										borderWidth: 12,
									},
								},
								data: [0, 0, 0, 0, 0],
							},
							{
								name: '本月碳排放',
								type: 'line',
								smooth: true,
								symbol: 'circle',
								symbolSize: 5,
								showSymbol: false,
								lineStyle: {
									normal: {
										width: 1
									},
								},
								areaStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
											[{
													offset: 0,
													color: 'rgba(0, 136, 212, 1)',
												},
												{
													offset: 0.8,
													color: 'rgba(0, 136, 212, 0.3)',
												},
											],
											false
										),
										shadowColor: 'rgba(0, 0, 0, 0.1)',
										shadowBlur: 10,
									},
								},
								itemStyle: {
									normal: {
										color: 'rgb(76, 208, 199)',
										borderColor: 'rgba(0,136,212,0.2)',
										borderWidth: 12,
									},
								},
								data: [0, 0, 0, 0, 0],
							},
						],
					};


					that.xData = res.result.date.map(item => {
						return item.t_date
					})
					that.option.grid = {
							width: '97%',
							height: '80%',
							left: '2%',
							right: '2%',
							top: '18%',
							bottom: '1%',
							containLabel: true,
						},
						that.option.xAxis = [{
							type: 'category',
							boundaryGap: false,
							axisLine: {
								show: false,
								lineStyle: {
									color: '#fff',
								},
							},
							axisTick: {
								show: false,
							},
							data: that.xData,
						}, ],
						that.option.series = []
					res.result.area.forEach(item => {
						let el = {
							name: '',
							type: 'line',
							smooth: true,
							showAllSymbol: true,
							symbolSize: 8,
							showSymbol: false,
							data: [], //data.values
						}
						el.name = item.t_area
						el.data = res.result.data[item.t_area].map(item => {
							return item.t_turnover > 0 ? item.t_turnover / 10000 : 0
						})
						that.option.series.push(el)
					});

					if (that) {
						that.$nextTick(() => {
							let chartDom = document.getElementById(domId);
							let echartInstance = echarts.init(chartDom);
							// console.log('chartDom==>>>', chartDom)
							// console.log('echartInstance==>>>', echartInstance)
							echartInstance.setOption(that.option);
						});
					}

				})
			}
		},
		created() {
			this.loadData()
		},
		mounted() {

		}
	}
</script>


<style lang="less" scoped>
	.left {
		// padding:10px;
		padding: 6px 10px 10px 10px;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1px solid rgba(255, 255, 255, 0.3);
		background: linear-gradient(360deg, #0c1117 0%, rgba(7, 19, 36, 0) 100%);
		position: relative;

		&::before {
			position: absolute;
			top: -2px;
			left: -2px;
			width: 16px;
			height: 16px;
			border-top: 3px solid #76828f;
			border-left: 3px solid #76828f;
			content: '';
		}

		&::after {
			position: absolute;
			top: -2px;
			right: -2px;
			width: 16px;
			height: 16px;
			border-top: 3px solid #76828f;
			border-right: 3px solid #76828f;
			content: '';
		}

		.footer-pan {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;

			&::before {
				position: absolute;
				bottom: -2px;
				left: -2px;
				width: 16px;
				height: 16px;
				border-bottom: 3px solid #76828f;
				border-left: 3px solid #76828f;
				content: '';
			}

			&::after {
				position: absolute;
				bottom: -2px;
				right: -2px;
				width: 16px;
				height: 16px;
				border-bottom: 3px solid #76828f;
				border-right: 3px solid #76828f;
				content: '';
			}
		}

		.title {
			width: 100%;
			margin: 0;
		}

		.chart {
			height: calc(100% - 30px);
			width: 100%;

			#bottomtp-left {
				height: 100%;
			}
		}
	}
</style>
